<template>
  <div class="my">
    <div class="toHouseTop head">
      <h4>{{ title }}</h4>
      <span @click="goBack">←</span>
    </div>
    <div class="mapFindHome_filter">
      <div class="mapFindHome_filter_top">
        <picker
          mode="selector"
          :range="cityList"
          range-key="label"
          @change="changeCity"
        >
          <span>{{ city.label || "北京" }}</span>
        </picker>
        <input type="text" placeholder="  请在这里输入区域/商圈">
      </div>
      <div class="mapFindHome_filter_middle">
        <div class="middle_left">
          <img class="img_left" src="@/assets/home_left.png" alt="">
          <p class="txt_left">买房</p>
        </div>
        <div class="middle_right">
          <img class="img_right" src="@/assets/home_right.png" alt="">
          <p class="txt_right">租房</p>
        </div>
      </div>
      <div class="mapFindHome_filter_bottom">
        <p v-for="(item,index) in addressList" :key="index">
          {{item}}&emsp;↓
        </p>
      </div>
    </div>
    <map
      :show-location="true"
      :markers="markers"
      :include-points="markers"
      @labeltap="labelTap"
    ></map>
  </div>
</template>

<script>
import { getCity, getHouseMap } from "@/service/index";

export default {
  data() {
    return {
      title: "地图找房",
      cityList: [],
      city: {},
      areaId: '',
      areaList: [],
      addressList:["区域","价格","户型","距离"]
    };
  },
  watch: {
    areaId: {
      handler: async function (value) {
        if (value) {
          let result = await getHouseMap(value);
          if (result.status === 200 && result.body.length) {
            this.areaList = result.body;
          }
        }
      },
      deep: true, //深度监听
      immediate: true, //立即触发
    },
  },
  computed: {
    markers() {
      return this.areaList.map((item, index) => {
        return {
          id: index,
          ...item.coord,
          label: {
            value: item.value,
            content: `${item.label}有${item.count}套房子`,
            color: "#ffd700",
            fontSize: 12,
            padding: 6,
            bgColor: "#000000cc",
            textAlign: "center",
            borderRadius: 5,
          },
          width: 0,
          height: 0,
        };
      });
    },
  },
  methods: {
    goBack() {
      wx.navigateBack({
        delta: 1,
      });
    },
    changeCity(e) {
      this.city = this.cityList[e.target.value];
      this.areaId = this.cityList[e.target.value].value;
    },
    labelTap({detail:{markerId}}) {
      this.areaId = this.areaList[markerId].value;
    },
  },
  async onShow() {
    let result = await getCity();
    if (result.status === 200) {
      this.cityList = result.body;
      this.city = this.cityList[0];
      this.areaId = this.city.value;
    }
  }
};
</script>

<style scoped>
.toHouse {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  position: relative;
}
.toHouseTop {
  position: sticky;
  top: 0;
}
.head {
  height: 90rpx;
  background: rgba(2, 114, 240, 1);
  padding-top: 52rpx;
  text-align: center;
  color: #fff;
  position: relative;
}
.head span {
  position: absolute;
  left: 50rpx;
  top: 60rpx;
}
.mapFindHome_filter {
  width: 100%;
  height: 400rpx;
}
map{
  width: 100%; 
  height: 770rpx;
}
.mapFindHome_filter_top{
  width: 100%;
  display: flex;
  height: 70rpx;
  padding-top: 29rpx;
}
.mapFindHome_filter_top picker{
  margin-left: 50rpx;
  margin-top: 10rpx;
}
.mapFindHome_filter_top input{
  border: 1px solid #ccc;
  background: #eee;
  flex: .8;
  margin-left: 50rpx;
  height: 60rpx;
}
.mapFindHome_filter_middle{
  width: 100%;
  height: 210rpx;
  display: flex;
  justify-content: space-between;
}
.middle_left{
  text-align: right;
  width: 50%;
}
.middle_right{
  text-align: left;
  width: 50%;
}
.mapFindHome_filter_bottom{
  width: 100%;
  height: 90rpx;
  border-top: 1px solid;
  display:flex;
  justify-content: space-between;
  
}
.mapFindHome_filter_bottom p{
    display: block;
    width: 25%;
    text-align: center;
    line-height: 90rpx;
  }
img{
  width: 77px;
  height: 77px;
}
.img_left{
  margin-right: 50rpx;
}
.img_right{
  margin-left: 50rpx;
}
.txt_left{
  margin-right: 90rpx;
}
.txt_right{
  margin-left: 90rpx;
}
</style>



